<section class="content-header">
  <h1>
    <a class="icn prev" ng-class="{'mobile':mobile}" ng-click="back()"></a>
    {{ pageTitle || hive.name }}
    <div class="pull-right">
    	<div>
	    	<a ng-if="hive.id != undefined && hive.owner" ng-click="confirmDeleteHive()" class="btn btn-danger">{{lang.Delete}}</a>
	    </div>
    </div>
  </h1>
  <!-- <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
    <li class="active">{{lang.hives}}</li>
  </ol> -->
</section>

<section class="content">
	
	<!-- Settings -->
	<div class="box">
	    <div class="box-header with-border">
	      <h3 class="box-title">{{lang.Hive}} {{lang.settings.toLowerCase()}}</h3>

	      <div class="box-tools pull-right">
	        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
	        </button>
	      </div>
	    </div>

	    <div class="box-body">
	    	<div class="row">
	    		<div class="col-xs-12">
	    			<fieldset>
	    				<legend>{{lang.Hive}} {{lang.details}}</legend>
		    			<div class="col-xs-12 col-sm-4 form-item">
				    		<label>{{lang.Name}}*</label>
				    		<div><input ng-model="hive.name" name="name" type="text" placeholder="{{ lang.name }}" class="form-control" required="required"></div>
			    		</div>

			    		<div class="col-xs-12 col-sm-4 form-item">
				    		<label>{{lang.Location}}*</label>
				    		<div>
				    			<select ng-if="hive.id == undefined || hive.owner" ng-model="hive_loc" ng-options="item as item.name for item in locations | orderBy:'name' track by item.id" type="select" class="form-control" ng-change="selectLocation(hive_loc)" required="required">
				    				<option value=''>{{lang.Select}} {{lang.location}}...</option>
				    			</select>
				    			<input ng-if="hive.id != undefined && !hive.owner" ng-value="hive.location" ng-disabled="true" type="text" class="form-control">
				    			<input ng-if="hive.id != undefined && !hive.owner" ng-model="hive_loc" type="hidden">
				    		</div>
				    	</div>
			    	
				    	<div class="col-xs-12 col-sm-4 form-item">
				    		<label>{{lang.Type}}*</label>
				    		<div>
				                <select ng-model="hive_type" ng-options="item as item.trans[locale] group by item.group[locale] for item in hivetypes | orderBy:transSort track by item.id" type="select" class="form-control" ng-change="selectHiveType(hive_type)">
				                	<option value=''>{{lang.Select}} {{lang.Hive_type}}...</option>
				                </select>
				            </div>
				        </div>
		    		</fieldset>
		    	</div>
	    		<div class="col-xs-12 col-sm-8">
		    		<fieldset>
	    				<legend>{{lang.Hive}} {{lang.configuration}}</legend>
				    	<div class="col-xs-12 col-md-4">
				    		
				    		<div class="form-item">
				    			<label>{{lang.Hive_honey_layers}}</label>
					            <div rn-stepper ng-model="hive.honey_layers" ng-disabled="hive.honey_layers < 0" min="0" max="5" step="1"></div>
				    		</div>
				    	
				    		<div class="form-item">
				    			<label>{{lang.Hive_brood_layers}}</label>
					            <div rn-stepper ng-model="hive.brood_layers" ng-disabled="hive.brood_layers < 0" min="0" max="5" step="1"></div>
				    		</div>
				    		<div class="form-item">
			    				<label>{{lang.Hive_frames}}</label>
				    			<div rn-stepper ng-model="hive.frames" ng-disabled="hive.frames < 1" min="1" max="20" step="1"></div>
				    		</div>
			    			
			    			<div>
					    		<label>{{ hive.name != null && hive.name != '' ? hive.name : lang.Hive }}</label>
				    			<div class="hive left">
					    			<p class="lid" style="width: {{hive.frames*13}}px;"></p>
					            	<p ng-repeat="layer in rangeStep(1,hive.honey_layers)" class="layer honey" style="background-color: {{hive.color}}; width: {{hive.frames*13}}px;">
					            		<span ng-repeat="f in rangeStep(1,hive.frames)" class="frame wax"></span>
					            	</p>
					            	<p ng-repeat="layer in rangeStep(1,hive.brood_layers)" class="layer brood" style="background-color: {{hive.color}}; width: {{hive.frames*13}}px;">
					            		<span ng-repeat="f in rangeStep(1,hive.frames)" class="frame wax"></span>
					            	</p>
					            	<p class="bottom" style="width: {{hive.frames*13}}px;"></p>
				            	</div>
					        </div>
			    		</div>
			    		<div class="col-xs-12 col-md-4">
				    		<div class="form-item">
				    			<label>{{lang.Hive_order}}</label>
					            <div rn-stepper ng-model="hive.order" ng-disabled="false" step="1"></div>
				    		</div>

				    		<label>{{lang.Hive_color}}</label>
				    		<div>
								<color-picker ng-model="hive.color"></color-picker>
				    		</div>
				    	</div>
			    	</fieldset>
			    </div>
			    <div class="col-xs-12 col-sm-4">
		    		<fieldset>
	    				<legend>{{lang.Brood_box_and_frame}} {{lang.dimensions}}</legend>

			    		<div class="form-item">
			    			<label>{{ lang.bb_width_cm }}</label>
				            <div rn-stepper ng-model="hive.bb_width_cm" ng-disabled="hive.brood_layers < 0" min="0" max="100" step="0.1"></div>
			    		</div>
			    	
			    		<div class="form-item">
		    				<label>{{ lang.bb_depth_cm }}</label>
			    			<div rn-stepper ng-model="hive.bb_depth_cm" ng-disabled="hive.brood_layers < 0" min="0" max="50" step="0.1"></div>
			    		</div>

			    		<div class="form-item">
			    			<label>{{ lang.bb_height_cm }}</label>
				            <div rn-stepper ng-model="hive.bb_height_cm" ng-disabled="hive.brood_layers < 0" min="0" max="100" step="0.1"></div>
			    		</div>
		    		

			    		<div class="form-item">
			    			<label>{{ lang.fr_width_cm }}</label>
				            <div rn-stepper ng-model="hive.fr_width_cm" ng-disabled="hive.frames < 0" min="0" max="100" step="0.1"></div>
			    		</div>
			    	
			    		<div class="form-item">
			    			<label>{{ lang.fr_height_cm }}</label>
			    			<div rn-stepper ng-model="hive.fr_height_cm" ng-disabled="hive.frames < 0" min="0" max="50" step="0.1"></div>
			    		</div>
						
				    </fieldset>
				</div>
		    </div>
		</div>

	    <div class="overlay" ng-if="loading">
	      <i class="fa fa-refresh fa-spin"></i>
	    </div>

        
	</div>

	<!-- Queen -->
	<div class="box" id="edit-queen">
	    <div class="box-header with-border">
	      <h3 id="queen" class="box-title">{{lang.Queen}}</h3>

	      <div class="box-tools pull-right">
	        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
	        </button>
	        <!--button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button-->
	      </div>
	    </div>
	    <!-- /.box-header -->
	    <div class="box-body">
	    	<div class="row">
	    		<div class="col-xs-12">
		    		<fieldset class="">
		    			<legend>{{lang.Queen}} {{lang.details}}</legend>

		    			<div class="row">
			    			<div class="col-xs-12 col-sm-4">
					    		<div class="form-item">
					    			<label>{{lang.Queen}} {{lang.name}}</label>
					    			<input ng-model="hive.queen.name" type="text" placeholder="{{lang.Queen}} {{lang.name}}" class="form-control">
					    		</div>

					    		<div class="form-item">
					    			<label>{{lang.Bee_race}}</label>
				    				<select ng-model="bee_race" ng-options="item as item.trans[locale] for item in beeraces | orderBy:transSort track by item.id" type="select" ng-change="selectBeeRace(bee_race)" class="form-control">
				    					<option value=''>{{lang.Select}} {{lang.Bee_race}}...</option>
				    				</select>
					            </div>
					    		<!-- <div class="form-item">
					    			<label>{{lang.Queen}} {{lang.queen_line}}</label>
					    			<input ng-model="hive.queen.line" type="text" placeholder="F0, F1, etc" class="form-control">
					    		</div>

					    		<div class="form-item">
					    			<label>{{lang.Queen}} {{lang.queen_tree}}</label>
					    			<input ng-model="hive.queen.tree" type="text" placeholder="{{lang.Queen}} {{lang.queen_tree}}" class="form-control">
					    		</div> -->
					    	
					    		<div class="form-item">
					    			<label>{{lang.Birth_date}} <span ng-if="queen_colored">({{ lang.changes_queen_color}})</span></label>
									<div class="input-group date">
									  <div class="input-group-addon">
									    <i class="fa fa-calendar"></i>
									  </div>
									  <input class="form-control pull-right" data-field="date" type="text" readonly="true" ng-model="hive.queen.created_at">
									</div>
					    		</div>
					   
					   			<div class="form-item">
						    		<label style="display:block;">{{lang.Age}}</label>
						    		<div>{{hive.queen.age}} {{ lang.year }}</div>
						    	</div>
					    	</div>
					    	
					    	<div class="col-xs-12 col-sm-4">
					    		<div class="form-item">
					    			<label>{{lang.Queen}} {{lang.queen_description}}</label>
					    			<input ng-model="hive.queen.description" type="text" class="form-control">
					    		</div>
					    		<div class="form-item">
					    			<label style="display:block;">{{lang.Queen_clipped}}</label>
					    			<switch ng-model="hive.queen.clipped" class="wide" on="{{lang.yes}}" off="{{lang.no}}"></switch>
					    		</div>
					    	
					    		<div class="form-item">
					    			<label style="display:block;">{{lang.Queen_fertilized}}</label>
					    			<switch ng-model="hive.queen.fertilized" class="wide" on="{{lang.yes}}" off="{{lang.no}}"></switch>
					    		</div>

					    		<div class="form-item">
						    		<label style="display:block;">{{lang.Queen_colored}}</label>
					    			<switch ng-model="queen_colored" class="wide" on="{{lang.yes}}" off="{{lang.no}}" ng-change="queen_colored_change()"></switch>
					    		</div>
					    	</div>

					    	<div class="col-xs-12 col-sm-4">

								<div ng-if="queen_colored">
						    		<label>{{lang.Color}}</label>
						    		<div>
							            <div>
								            <div class="queen-icon" style="background-color: {{hive.queen.color}};"></div>
								            <color-picker ng-model="hive.queen.color"></color-picker>
								        </div>
						    		</div>
								</div>			    	
					    	</div>
					    </div>
				    </fieldset>
				</div>
			</div>

	    </div>
	     
	    <div class="overlay" ng-if="loading">
          <i class="fa fa-refresh fa-spin"></i>
        </div>
	    
	</div>

	<div class="alert alert-danger" ng-show="error_msg != null">
        <p>{{ error_msg }}</p>
    </div>

	<button ng-click="saveHive(true)" class="btn btn-primary btn-block">{{lang.save_and_return}}</button>

</section>

<div id="dtBox"></div>